<template>
  <view class="viewopt">
    <scroll-view
      scroll-y="true"
      class="good-list"
      refresher-enabled="true"
      :refresher-triggered="refresherTriggered"
      @refresherrefresh="onPullDownRefresh"
      @scrolltolower="onReachBottom"
    >
      <view class="content" v-for="item in recordList" :key="item.id">
        <view class="b-s">
          <view class="t-s">
            <view class="tts-s">我的反馈</view>
            <view
              class="tt-s"
              :class="
                item.status === '已处理' ? 'status-done' : 'status-pending'
              "
            >
              {{ item.status }}
            </view>
          </view>
          <view class="con-s">
            <text class="title">提交内容: {{ item.content }}</text>
            <text class="title">提交时间: {{ item.createdTime }}</text>
            <text class="title">提交图片：</text>
          </view>
          <view class="img-list">
            <view
              v-for="(img, index) in item.imageUrls"
              :key="index"
              class="img-item"
              @click="previewImg(item.imageUrls, index)"
            >
              <image :src="img" mode="aspectFill" class="img-box" />
            </view>
          </view>
        </view>
      </view>
      <!-- 加载更多状态 -->
      <view class="loading-more" v-if="isLoadingMore">
        <text>加载更多...</text>
      </view>
      <!-- 没有更多数据 -->
      <view class="no-more-data" v-if="!hasMore && !isLoadingMore">
        <text>没有更多的提交记录</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { computed, reactive, ref } from "vue";
import { avatarUrlImg } from "@/api/config/http";
import { onLoad } from "@dcloudio/uni-app";
import { feedbackListAPI } from "@/api/feedback";
import { formatTimeToChinese } from "@/hook/format";
// 定义响应式数据
const recordList = ref([]); // 订单记录列表
const hasMore = ref(true); // 是否还有更多数据
const isLoadingMore = ref(false); // 加载更多状态
const refresherTriggered = ref(false); // 下拉刷新状态
const current = ref(1);
const size = ref(5);
const baseImageUrl = avatarUrlImg;
const params = reactive({
  pageNum: 1,
  pageSize: 10,
});

const fetchOrderRecords = (isRefresh = false) => {
  if (isRefresh) {
    current.value = 1;
    hasMore.value = true;
  }
  if (!hasMore.value) return;
  isLoadingMore.value = true;
  setTimeout(async () => {
    const res = await feedbackListAPI({
      pageNum: current.value,
      pageSize: params.pageSize,
    });
    const dataList = res.data.records;

    const newRecords = dataList.map((item) => ({
      ...item,
      status: item.status === 2 ? "已处理" : "处理中",
      createdTime: formatTimeToChinese(item.createdTime),
      imageUrls: item.imageUrls?.map((url) => baseImageUrl + url) || [],
    }));

    if (isRefresh) {
      recordList.value = newRecords;
    } else {
      recordList.value.push(...newRecords);
    }

    hasMore.value = newRecords.length >= size.value;
    current.value++;
    isLoadingMore.value = false;
    refresherTriggered.value = false;
  }, 1000);
};
function previewImg(urls, currentIndex) {
  uni.previewImage({
    urls,
    current: urls[currentIndex],
  });
}
// // 下拉刷新处理
const onPullDownRefresh = () => {
  refresherTriggered.value = true;
  fetchOrderRecords(true);
  uni.showToast({
    title: "刷新成功",
    icon: "success",
    duration: 300,
  });
};

// 滚动到底部处理
const onReachBottom = () => {
  if (hasMore.value && !isLoadingMore.value) {
    fetchOrderRecords();
  }
};

onLoad(() => {
  fetchOrderRecords();
});
</script>
<style lang="scss" scoped>
// 样式保持不变
page {
  height: 100%;
  overflow: hidden;
  background: rgba(146, 190, 171, 0.15);
}

.good-list {
  height: calc(100vh - 20rpx);
}

.img-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20rpx;
  margin: 20rpx;
  .img-item {
    width: 100rpx;
    height: 100rpx;
    border-radius: 8rpx;
    overflow: hidden;
    .img-box {
      width: 100%;
      height: 100%;
    }
  }
}

.viewopt {
  display: flex;
  height: 100vh;

  flex-direction: column;
  background: rgba(146, 190, 171, 0.15);
}

.content {
  margin: 20rpx 40rpx;
  flex-direction: column;
  display: flex;
  border-radius: 12rpx;
  height: 300rpx;
  background: #ffffff;
  margin-bottom: 20rpx;
  padding-bottom: 20rpx;

  &:last-child {
    margin-bottom: 0;
  }

  .b-s {
    display: flex;
    flex-direction: column;
    margin: 10rpx 40rpx;
    height: 100%;
  }

  .title {
    margin-left: 20rpx;
    color: #000;
    font-size: 26rpx;
  }
}
.con-s {
  display: flex;
  margin-top: 20rpx;
  flex-direction: column;
}

.t-s {
  height: 15%;
  display: flex;
  flex-direction: row;

  .tts-s {
    width: 300rpx;
    height: 100%;
    font-size: 34rpx;
    font-weight: 500;
    align-items: center;
    display: flex;
    text-align: left;
  }

  .tt-s {
    height: 100%;
    width: 120rpx;
    margin-left: auto;
    align-items: center;
    display: flex;
    text-align: left;
    font-size: 34rpx;
    font-weight: 500;
  }
}
</style>
<style scoped>
.status-done {
  color: #00c292;
}

.status-pending {
  color: #ffa500;
}
</style>
